<template>
  <section class="todoapp">
    <TodoHeader @add="add"></TodoHeader>
    <TodoMain @cli="cli" :list="list" @del="del" @all="all"></TodoMain>
    <TodoFooter @clern="clern" :num="num" :list="list" @qb="qb" @jx="jx" @wc="wc"></TodoFooter>
  </section>
</template>
<script setup>
import TodoFooter from "./components/TodoFooter.vue";
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";

import { ref, computed } from "vue";

const list = ref(
  [
    { id: 1, name: "吃饭", isDone: true },
    { id: 2, name: "睡觉", isDone: false },
    { id: 3, name: "打豆豆", isDone: true },
  ],
);

const del = (id) => {
  list.value = list.value.filter((item) => item.id !== id);
};
function all() {
  const flag = list.value.some((item) => {
    return item.isDone === false;
  });
  list.value.forEach((item) => {
    item.isDone = flag;
  });
}

function add(ipt) {
  list.value.push({
    id: list.value.length + 1,
    name: ipt,
    isDone: false,
  });
}

const num = computed(() => {
  return list.value.reduce((pre, item) => {
    return item.isDone ? pre - 1 : pre
  }, list.value.length)
})

function cli(id) {
  list.value.forEach((item) => {
    item.id === id ? item.isDone = !item.isDone : ''
  })
}

function clern() {
  list.value = list.value.filter(item => item.isDone === false)
}

// const checkde = ref('qb')

// function qb() {
//   checkde.value = 'qb'
// }

// function jx() {
//   checkde.value = 'jx'
// }

// function wc() {
//   checkde.value = 'wc'
// }

// const lists = computed(() => {
//   if (checkde.value === 'qb') {
//     return list.value
//   } else if (checkde.value === 'jx') {
//     return list.value.filter(item => item.isDone === false)
//   } else {
//     return list.value.filter(item => item.isDone === true)
//   }
// })
</script>
